<template>
  <div class="node-box" ref="process">
    <!--  :style="{ height: processHeight + 'px' }" -->
    <div class="scale-box">
      <div class="plus" @click="onPlusOrMinus('plus')">
        <el-icon><Plus /></el-icon>
      </div>
      <div class="num">{{ parseInt(scaleNum * 100) }}%</div>
      <div class="minus" @click="onPlusOrMinus('minus')">
        <el-icon><Minus /></el-icon>
      </div>
    </div>
    <!-- 流程图 -->
    <div class="node-list" ref="nodeList">
      <flow-chart :nodeConfig="nodeConfig"></flow-chart>
      <div class="end-node">
        <div class="end-node-circle"></div>
        <div class="end-node-text"> {{ t('keys.process_ended') }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
import flowChart from './flowChart.vue'
import { mouse } from './hooks/mouse'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const nodeList = ref(null)
const { mouseEvent, onPlusOrMinus, scaleNum } = mouse()
const props = defineProps({
  // 流程图数据JSON
  nodeConfig: {
    type: Object,
    default: () => {}
  },
  // 流程图数据JSON
  topHeaderHeight: {
    type: Number,
    default: 0
  }
})
const process = ref(null)
const nodeConfig = ref(props.nodeConfig)
onMounted(() => {
  nextTick(() => {
    mouseEvent('.node-list')
    ElMessage({
      showClose: true,
      offset: 100,
      duration: 10000,
      message: '按住左键可拖动流程图'
    })
  })
})

onBeforeUnmount(() => {
  ElMessage.closeAll()
})
</script>

<style lang="scss" scoped>
.node-box {
  width: 100%;
  height: 88vh;
  position: relative;
  overflow: hidden;
  background: #fafafa;
  &::before {
    // content: '按住左键可拖动流程图';
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    text-align: center;
    font-size: 40px;
    color: #e8e8e8;
  }
  .scale-box {
    position: absolute;
    right: 40px;
    top: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    .plus,
    .minus {
      border: 1px solid #d6d6d6;
      border-radius: 2px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #d6d6d6;
      cursor: pointer;
    }
    .num {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      padding: 0 16px;
    }
  }
  .node-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    .end-node {
      border-radius: 50%;
      font-size: 14px;
      color: rgba(25, 31, 37, 0.4);
      text-align: left;
      .end-node-circle {
        width: 10px;
        height: 10px;
        margin: auto;
        border-radius: 50%;
        background: #dbdcdc;
      }
      .end-node-text {
        text-align: center;
        width: 120px;
        height: 40px;
        background: #ffffff;
        box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 15%);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
        margin: 5px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
    }
  }
}
</style>
